<template>
    <mescroll-vue :down="downOption" :up="upOption" @init="mescrollInit">
        <slot></slot>
    </mescroll-vue>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
//原谅我上拉 下拉分不清。。。
export default {
    name: 'mescrollWrap',
    data() {
        return {
            downOption: {
                auto: false,
                callback: () => {
                    const promise = new Promise((resolve) => {
                        setTimeout(resolve, 300);
                    }); //最少300ms 后才能结束downLoading
                    this.$emit('init', (...args) => {
                        promise.then(() => {
                            this.$_endSuccess(...args);
                        });
                    });
                },
            },
            upOption: {
                auto: false,
                inited: () => {
                    this.upInit = true;
                },
                toTop: this.wrapperId
                    ? {
                          warpId: this.wrapperId,
                          //回到顶部按钮
                          src: require('resources/mescroll-totop.png'), //图片路径,默认null,支持网络图
                          offset: 800, //列表滚动1000px才显示回到顶部按钮
                      }
                    : false,
                callback: () => {
                    this.$emit('loadMore', this.$_endSuccess);
                },
                htmlNodata: `<span class="c-gray">没有更多啦...<span>`,
                noMoreSize: 1,
                offset: 350,
            },
            mescroll: null,
            upInit: false, //下拉加载是否初始化完成
        };
    },
    props: {
        upAuto: {
            type: Boolean,
            required: true,
        }, //是否触发下拉刷新
        wrapperId: {
            type: String,
        },
    },
    watch: {
        init(bol) {
            if (bol) {
                this.mescroll.scrollTo(0, 0);
                this.mescroll.triggerDownScroll();
            }
        },
    },
    computed: {
        init() {
            //mescroll初始化成功  且 下拉加载初始化成功 且 父级让下拉加载
            return Boolean(this.mescroll) && this.upInit && this.upAuto;
        },
    },
    components: {
        MescrollVue,
    },
    methods: {
        $_endSuccess(hasNext) {
            this.mescroll.endSuccess(10, hasNext);
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
            console.log(mescroll);
        },
    },
};
</script>
<style lang="scss"></style>
